$(document).ready(function() {
    $('#addalbum').toggle(function(){
        $('#addalbumdetails').toggle('medium');
        $(this).html("&#x25BC;");
    },function(){
        $('#addalbumdetails').toggle('medium');
        $(this).html("&#x25B6;");
    });

    $('#editalbum').toggle(function(){
        $('#editalbumdetails').toggle('medium');
        $(this).html("&#x25BC;");
    },function(){
        $('#editalbumdetails').toggle('medium');
        $(this).html("&#x25B6;");
    });

    $('#delalbum').toggle(function(){
        $('#delalbumdetails').toggle('medium');
        $(this).html("&#x25BC;");
    },function(){
        $('#delalbumdetails').toggle('medium');
        $(this).html("&#x25B6;");
    });

    $('#viewalbum').toggle(function(){
        $('#viewalbumdetails').toggle('medium');
        $(this).html("&#x25BC;");
    },function(){
        $('#viewalbumdetails').toggle('medium');
        $(this).html("&#x25B6;");
    });

    $('#viewcustomer').toggle(function(){
        $('#viewcustomerdetails').toggle('medium');
        $(this).html("&#x25BC;");
    },function(){
        $('#viewcustomerdetails').toggle('medium');
        $(this).html("&#x25B6;");
    });

    $('#delcustomer').toggle(function(){
        $('#delcustomerdetails').toggle('medium');
        $(this).html("&#x25BC;");
    },function(){
        $('#delcustomerdetails').toggle('medium');
        $(this).html("&#x25B6;");
    });

    $('#vieworders').toggle(function(){
        $('#viewordersdetails').toggle('medium');
        $(this).html("&#x25BC;");
    },function(){
        $('#viewordersdetails').toggle('medium');
        $(this).html("&#x25B6;");
    });

    $('#addsong').click(function(){
        var num     = $('.clonedsong').length; // how many "duplicatable" input fields we currently have
        var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('#track' + num).clone().attr('id', 'track' + newNum);

        // manipulate the name/id values of the input inside the new element
        newElem.find('#song'+num).attr('id', 'song' + newNum).attr('name', 'song' + newNum);
        newElem.find('#dur'+num).attr('id', 'dur' + newNum).attr('name', 'dur' + newNum);
        newElem.find('#file'+num).attr('id', 'file' + newNum).attr('name', 'file' + newNum);
        newElem.find('#prev'+num).attr('id', 'prev' + newNum).attr('name', 'prev' + newNum);
        newElem.find('#price'+num).attr('id', 'price' + newNum).attr('name', 'price' + newNum);

        // insert the new element after the last "duplicatable" input field
        $('#track' + num).after(newElem);
    });

    //validation
    year = (new Date).getFullYear();
    $('#addalbumform').validate({
        rules: {
            albumnm: {required: true, maxlength: 100},
            albumartist: {required: true, maxlength: 100},
            albumart: {required: true, accept:'png|jpg'},
            albumgenre: {required: true, maxlength: 100},
            albumdesc: {required: true, maxlength: 500},
            albumyr: {required: true, digits:true, min: 1800, max: year}
        },
        messages: {
            albumnm: {required:"Fill-out album name", maxlength: "Album name cannot exceed 100 characters"},
            albumartist: {required: "Fill-out album artist", maxlength: "Album artist cannot exceed 100 characters"},
            albumart: {required: "Fill-out album art", accept:'.jpg and .png files only'},
            albumgenre: {required: "Fill-out album genre", maxlength: "Album genre cannot exceed 100 characters"},
            albumdesc: {required: "Fill-out album description", maxlength: "Album description cannot exceed 500 characters"},
            albumyr: {required: "Fill-out year of release", digits:'Invalid year', min: 'Earliest year of release is 1800', max:'Latest year of release is '+year}
        }
    });

    //searching
    $('#search4editbutton').click(function() {
        var value = $('#album2edit').val();
        //alert("hahaha");
        $.get('data/products.xml',function(data){
            var found = false;
            $(data).find('album').each(function(){ 
                if($(this).children('albumtitle').text()==value){
                    $('#search4editres').empty();
                    var id = $(this).children('id').text();
                    var title = $(this).children('albumtitle').text();
                    var artist = $(this).children('artist').text();
                    var art = $(this).children('albumart').text();
                    var genre = $(this).children('genre').text();
                    var desc = $(this).children('desc').text();
                    var yr = $(this).children('year').text();
                    var form = '<form id="editalbumform" name="editalbumform" method="post" action=""><ul>';
                    form += '<li><input type="hidden" id="editalbumid" name="editalbumid" value="'+id+'" /></li>';
                    form += '<li><label for="editalbumnm">Album Title:</label><input type="text" id="editalbumnm" name="editalbumnm" value="'+title+'" /></li>';
                    form += '<li><label for="editalbumartist">Artist:</label><input type="text" id="editalbumartist" name="editalbumartist" value="'+artist+'" /></li>';
                    form += '<li><label for="editalbumart">Album Art:</label><input type="file" id="editalbumart" name="editalbumart" value="'+art+'" /></li>';
                    form += '<li><label for="editalbumgenre">Genre:</label><input type="text" id="editalbumgenre" name="editalbumgenre" value="'+genre+'" /></li>';
                    form += '<li><label for="editalbumdesc">Description:</label><textarea id="editalbumdesc" name="editalbumdesc">'+desc+'</textarea></li>';
                    form += '<li><label for="editalbumyr">Year:</label><input type="text" id="editalbumyr" name="editalbumyr" value="'+yr+'" /></li>';
                    form += '<li><input type="submit" id="editalbumsubmit" name="editalbumsubmit" value="Submit" /></li>';
                    form += '</ul></form>';
                    $('#search4editres').append($(form));
                    found = true;
                }
            });
            if(!found){
                $('#search4editres').empty().append('Album not found');
            }
        });
                //alert("haha");
        return false;
    });

    $('#search4delbutton').click(function() {
        var value = $('#album2del').val();
        //alert("hahaha");
        $.get('data/products.xml',function(data){
            var found = false;
            $(data).find('album').each(function(){ 
                if($(this).children('albumtitle').text()==value){
                    $('#search4delres').empty();
                    var id = $(this).children('id').text();
                    var title = $(this).children('albumtitle').text();
                    var artist = $(this).children('artist').text();
                    var art = $(this).children('albumart').text();
                    var genre = $(this).children('genre').text();
                    var desc = $(this).children('desc').text();
                    var yr = $(this).children('year').text();
                    var form = '<form id="delalbumform" name="delalbumform" method="post" action=""><ul>';
                    form += '<li><input type="hidden" id="delalbumid" name="delalbumid" value="'+id+'" /></li>';
                    form += '<li><label for="delalbumnm">Album Title:</label><input type="text" id="delalbumnm" name="delalbumnm" value="'+title+'" /></li>';
                    form += '<li><label for="delalbumartist">Artist:</label><input type="text" id="delalbumartist" name="albumartist" value="'+artist+'" /></li>';
                    form += '<li><label for="delalbumart">Album Art:</label><input type="file" id="delalbumart" name="delalbumart" value="'+art+'" /></li>';
                    form += '<li><label for="delalbumgenre">Genre:</label><input type="text" id="delalbumgenre" name="delalbumgenre" value="'+genre+'" /></li>';
                    form += '<li><label for="delalbumdesc">Description:</label><textarea id="delalbumdesc" name="delalbumdesc">'+desc+'</textarea></li>';
                    form += '<li><label for="delalbumyr">Year:</label><input type="text" id="delalbumyr" name="delalbumyr" value="'+yr+'" /></li>';
                    form += '<li><input type="submit" id="delalbumsubmit" name="delalbumsubmit" value="Submit" /></li>';
                    form += '</ul></form>';
                    $('#search4delres').append($(form));
                    found = true;
                }
            });
            if(!found){
                $('#search4delres').empty().append('Album not found');
            }
        });
                //alert("haha");
        return false;
    });

    $('#search4viewbutton').click(function() {
        var value = $('#album2view').val();
        //alert("hahaha");
        $.get('data/products.xml',function(data){
            var found = false;
            $(data).find('album').each(function(){ 
                if($(this).children('albumtitle').text()==value){
                    $('#search4viewres').empty();
                    var title = $(this).children('albumtitle').text();
                    var artist = $(this).children('artist').text();
                    var art = $(this).children('albumart').text();
                    var genre = $(this).children('genre').text();
                    var desc = $(this).children('desc').text();
                    var yr = $(this).children('year').text();
                    var details = '<table style="text-align: left;padding-right: 10px">';
                    details += '<tr><th>Album Title:</th><td>'+title+'</td></tr>';
                    details += '<tr><th>Artist:</th><td>'+artist+'</td></tr>';
                    details += '<tr><th>Album Art:</th><td>'+art+'</td></tr>';
                    details += '<tr><th>Genre:</th><td>'+genre+'</td></tr>';
                    details += '<tr><th>Description:</th><td>'+desc+'</td></tr>';
                    details += '<tr><th>Year:</th><td>'+yr+'</td></tr>';
                    details += '</table>';
                    details += '<br/><h4>Songs</h4><table><tr><th>Track No.</th><th>Title</th><th>Duration</th><th>File</th><th>Preview</th><th>Price</th></tr>';
                    $(this).children('songs').children('song').each(function(){
                        details += '<tr><td>'+$(this).children('trackno').text()+'</td>';
                        details += '<td>'+$(this).children('title').text()+'</td>';
                        details += '<td>'+$(this).children('duration').text()+'</td>';
                        details += '<td>'+$(this).children('fileloc').text()+'</td>';
                        details += '<td>'+$(this).children('prev').text()+'</td>';
                        details += '<td>'+$(this).children('price').text()+'</td></tr>';                                    
                    });
                    details += '</table>';
                    $('#search4viewres').append($(details));
                    found = true;
                }
            });
            if(!found){
                $('#search4viewres').empty().append('Album not found');
            }
        });
                //alert("haha");
        return false;
    });
    
    $('#search4delcustbutton').click(function() {
        var value = $('#cust2del').val();
        $.get('data/accounts.xml',function(data){
            
            var found = false;
            $(data).find('account').each(function(){ 
                if($(this).children('email').text()==value){
                    var details = '<form id="delcustform" name="delcustform" action="" method="post">';
                    details += 'Customer is found. Would you like to delete it? (Do not press the button if not)<br>';
                    details += '<input type="hidden" id="hiddenemail2" name="hiddenemail2" value="'+$(this).children('email').text()+'" />';
                    details += '<input type="submit" id="delcustsubmit" name="delcustsubmit" value="Yes" /></form>';
                    $('#search4delcustres').append($(details));
                    found = true;
                }
            });
            if(!found){
                $('#search4delcustres').empty().append('Customer not found');
            }
        })
        return false;
    });
});